<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/tools/unitJS.js"></script>
	<title></title>
</head>
<body>
	<div id="warp">
		<img src="img/2.png" alt="">
		<img src="img/3.png" alt="">
		<img src="img/4.png" alt="">
		<img src="img/5.png" alt="">
	</div>
</body>

<script type="text/javascript">
	
	var content = document.getElementById('content');
	var imgs = document.getElementsByTagName('img');
	var standard = 200;

	document.onmousemove = function(e){
		var ev = e || event;

		for (var i = 0; i < imgs.length; i++) {

			var imgPostion = UnitJS.getPostion(imgs[i]);
			var x = imgPostion.left + imgs[i].offsetWidth/2;
			var y = imgPostion.top + imgs[i].offsetHeight/2;
			var longX = x - ev.clientX;
			var longY = y - ev.clientY;
			var juli = Math.sqrt(longX * longX + longY * longY);
			if (juli < standard) {
				var scle = 2 - juli/standard;
				imgs[i].style.width = 100 * scle + 'px';
			}else {
				imgs[i].style.width = '100px';
			}
		}
		console.log(imgs[0].style.width);
			
	}





</script>


</html>